<template>
    <div>
        <div :class="{ boxwrap: wrapheight == 1 ? false : true }">
            <div class="box" :style="{ backgroundColor: backgroundColor || 'rgba(255, 255, 255, .8)' }">
                <div class="sidetop lefttop">
                    <img class="head" src="../assets/user.png" v-if="!back" @click="topages('/personal')">
                    <img class="topimg" src="../assets/angle-left.png" alt="" v-if="back" style="transform: scale(.6);"
                        @click="toback">
                </div>
                {{ titles || '峰影视厅' }}
                <div class="sidetop righttop">
                    <img class="topimg" src="../assets/search.png" alt="" style="margin-right: .1rem;transform: scale(.8);"
                        v-if="search" @click="topages('/search')">
                    <img class="topimg" src="../assets/more.png" alt="" v-if="more == 1">
                    <img class="topimg" src="../assets/settings2.png" alt="" v-if="setting">
                </div>
            </div>
        </div>
        <slot name="df"></slot>
    </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';
const router = useRouter()
const { backgroundColor, wrapheight, titles, back, search, more, setting } = defineProps(['backgroundColor', 'wrapheight', 'titles', 'back', 'search', 'more', 'setting'])
const toback = () => { router.back() }
const topages = (link) => { router.push({ path: link }) }
</script>

<style scoped>
.boxwrap {
    height: 80px;
}

.box {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    line-height: 80px;
    text-align: center;
    box-shadow: 0 0 10px 0 #999;
    font-size: 25px;
    z-index: 10;
}

.sidetop {
    position: absolute;
    top: 0;
    padding: 0 20px;
    height: 80px;

}

.lefttop {
    left: 0;
}

.righttop {
    right: 0;
}

.head {
    position: relative;
    top: 20px;
    margin-left: 10px;
    vertical-align: top;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #c6a3a3;
    overflow: hidden;
}

.topimg {
    position: relative;
    top: 20px;
    vertical-align: top;
    width: 40px;
    height: 40px;
}
</style>